<template>
  <div class="yl-clearfix">
    <el-row class="searchgrid">


      <el-col :span="6">
          <select class="yl-select-option" v-model="filters.is_paid_over" @change="fetchAgentInterestList">
            <option :value="null">全部</option>
            <option v-for="(item,idx) in paidOptions" :key="item" :value="idx" v-text="item"></option>
          </select>
        </el-col>


        <el-col :span="8" style="text-align:center">
          总营收:
          <span v-text="pagination.thisAgentAllInterest.toFixed(2)" v-if="pagination.thisAgentAllInterest"></span>
          客户推广成本:
          <span v-text="pagination.thisAgentPromoteCast.toFixed(2)" v-if="pagination.thisAgentPromoteCast"></span>
        </el-col>
      <el-col :span="10">
          <div class="yl-float-right">
            <input v-model="filters.phone" type="text" placeholder="客户手机号">
            <input v-model="filters.stockAccountId" type="text" placeholder="子账户ID">
            <input class="yl-input-button" value=" 查询 " type="button" @click="fetchAgentInterestList">
            <input class="yl-input-button" value=" 导出Excel " type="button" @click="">
          </div>
        </el-col>
      </el-row>
      <!--列表-->
    <el-table :data="pagination.data"
              v-loading="loading"
              style="width: 100%;">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="client.cellphone" label="客户信息"></el-table-column>
      <el-table-column prop="stock_finance_id" label="子账户ID"></el-table-column>

      <el-table-column label="业务类型">
        <template scope="scope">
          <span v-if="scope.row.u_stock_financing" v-text="scope.row.u_stock_financing.post_add_caution_money > 0 ? '追配' : '初配'"></span>
        </template>
      </el-table-column>


      <el-table-column label="产品类型" prop="u_stock_financing.stock_finance_product.product_name"></el-table-column>


      <el-table-column prop="u_stock_financing.current_finance_amount" label="借款金额"></el-table-column>

      <el-table-column label="保证金金额">
        <template scope="scope" v-if="scope.row.u_stock_financing">
          <span v-if="scope.row.u_stock_financing">
                      {{scope.row.u_stock_financing.init_caution_money + scope.row.u_stock_financing.post_finance_caution_money + scope.row.u_stock_financing.post_add_caution_money}}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="u_stock_financing.interest_rate" label="借款利率"></el-table-column>

      <el-table-column prop="total_insterests" label="递延费金额"></el-table-column>
      <el-table-column prop="myShareInterest" label="营收"></el-table-column>
      <el-table-column prop="cust_promotion_cost" label="客户推广成本">
        <template scope="scope">
          {{scope.row.cust2_interests + scope.row.cust3_interests + scope.row.cust1_interests}}
        </template>
      </el-table-column>
      <el-table-column prop="interest_start_time" label="收费时间"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="is_paid_over" label="状态"></el-table-column>

    </el-table>

    <div class="yl-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="pagination.current_page"
        :page-sizes="[15, 30, 45, 60]"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="parseInt(pagination.per_page)"
        :total="pagination.total"
        style="float:right;">
      </el-pagination>
    </div>

  </div>


</template>

<script>
  import {getAgentInterestList} from '../../api/agent';

  export default {
    data() {
      return {
        paidOptions: [
          '未缴纳',//0
          '已缴纳',//1
        ],
        filters: {
          page: 1,
          size: 15,
          stockAccountId: null,
          phone: null,
          is_paid_over: null,
        },
        pageIndex: 1,
        pagination: {},
        loading: false,
      }
    },

    methods: {
      fetchAgentInterestList() {
        this.loading = true;
        let params = this.filters;
        getAgentInterestList({params}).then(res => {
          this.pagination = res.data;
          this.loading = false;
        }).catch(error => this.ezNotifyAxiosCatch(error));
      },
      handleSizeChange(size) {
        this.filters.size = size;
        this.filters.page = 1;
        this.fetchAgentInterestList();
      },
      handlePageChange(clickPageIndex) {
        this.filters.page = clickPageIndex;
        this.fetchAgentInterestList();
      },

    },
    mounted() {
      this.fetchAgentInterestList();
    }
  }
</script>

